<template>
  <Modal
      :draggable="!this.$config.mask"
      :mask="this.$config.mask"
      :mask-closable="!this.$config.mask"
      :value="value"
      @on-visible-change="visibleChange"
      :width="1000">
    <p slot="header">
      <template v-if="modalData.type==='insert'">

      </template>
      <template v-if="modalData.type==='detail'">
        流程图
      </template>
      <template v-else>
        流程图预览：{{ modalData.flowScheme.schemeName }}
      </template>

    </p>

    <flow-area-view-only-select :type="modalData.type" ref="flowArea"></flow-area-view-only-select>
    <div slot="footer">
      <Button icon="md-close" @click="cancel">关闭</Button>
    </div>
  </Modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import FlowAreaViewOnlySelect from '@/components/flow/flow-area-view-only.vue';

@Component({
  components: {
    FlowAreaViewOnlySelect,
  },
})
export default class FlowSchemeModal extends AbpBase {
  name: string = 'FlowSchemeModal';

  @Prop({type: Boolean, default: false}) value: boolean;
  @Prop({type: Object, default: {}}) modalData: any;
  @Prop({type: String, default: ''}) from: string;


  cancel() {
    this.$emit('input', false);
  }

  visibleChange(value: boolean) {
    if (!value) {
      this.$emit('input', value);
    } else {

      (this.$refs.flowArea as any).data = this.modalData.flowScheme.schemeContent;
    }
  }


  mounted() {
  }

  created() {
  }
}
</script>

<style lang="less" scoped>

</style>
